<template>
  <div id="app">
    <div class="settle" :style="'height:'+fullHeight+'px;'">
      <div class="top">
        <span class="iconfont icon-fanhui" @click="back"></span>
        <span>结算中心</span>
      </div>
      <div class="address">
        <div class="addr-main">
          <div class="msg">
            <span class="no-msg" v-if="!address">请选择收货地址</span>
            <div class="has-msg" v-else>
              <div class="icon">
                <span class="iconfont icon-wode"></span>
              </div>
              <div class="info">
                <div class="person">
                  <span>{{name}}</span>
                  <span>{{mdTel}}</span>
                </div>
                <div class="addr">
                  <span>{{province}}{{city}}{{county}}{{detail}}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="right">
            <span class="iconfont icon-weibiaoti1 right-icon" @click="showPicker=!showPicker"></span>
            <div class="picker-mask" v-if="showPicker"></div>
            <ul v-if="showPicker" class="picker">
              <li v-for="(v,i) in addresslist" :key="i" @click="changeAddress(i)">
                <span>{{v.receiveName}} {{v.receiveTel}}</span>
                <span>地址：{{v.province}}{{v.city}}{{v.country}}{{v.detailed}}</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="line">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="totalnum">
        <div>
          <img :src="logoImg" />
          <span>馋嘴喵</span>
        </div>
        <div>共{{totalNum}}件</div>
      </div>
      <ul class="list">
        <li class="item" v-for="(v,i) in data" :key="i">
          <div class="img">
            <img :src="v.g_src" />
          </div>
          <div class="msg">
            <div class="name">
              <span>{{v.product.proName}}</span>
            </div>
            <div class="specs">
              <span>x{{v.product.c_num}}</span>
            </div>
          </div>
          <div class="price">
            <span>￥{{v.product.price}}</span>
          </div>
        </li>
      </ul>
      <div class="item-list">
        <div class="coupon item">
          <div class="left">
            <span>优惠券</span>
          </div>
          <div class="right">
            <span>{{coupon>0?coupon+'元':'无可用'}}</span>
            <span class="iconfont icon-you icon"></span>
          </div>
        </div>
        <div class="integral item">
          <div class="left">
            <span>积分</span>
            <span class="countint">共{{this.integral}}，可用{{this.integral}}，抵￥{{this.integral/100}}</span>
            <span class="iconfont icon-hj1 warning" @click="showToast" v-if="this.integral==0"></span>
          </div>
          <div class="right">
            <div class="r-left">
              <span>{{this.integral==0?'不可用':'可用'}}</span>
            </div>
            <span class="icon"></span>
          </div>
        </div>
        <div class="item">
          <div class="left">
            <span>支付方式</span>
          </div>
          <div class="right">
            <div class="r-left">
              <span>在线支付</span>
            </div>
            <span class="icon"></span>
          </div>
        </div>
        <div class="remarks item">
          <span>订单备注</span>
          <input type="text" placeholder="建议留言前先和客服沟通确认" value="remark" v-model="remark" />
        </div>
      </div>
      <div class="price-list">
        <div class="item">
          <span>商品总额</span>
          <span>￥{{totalPrice}}</span>
        </div>
        <div class="item">
          <span>优惠券</span>
          <span>-￥{{coupon}}</span>
        </div>
        <div class="item">
          <span>积分抵零</span>
          <span>-￥{{integral/100}}</span>
        </div>
        <div class="item">
          <span>会员折扣</span>
          <span>-￥{{discount}}</span>
        </div>
        <div class="item">
          <span>运费</span>
          <span>￥{{freight}}</span>
        </div>
      </div>
      <div class="msg-info">
        <span>您同意本次购物引发的法律争议</span>
        <span>均由商家注册登记所在地人民法院管辖</span>
      </div>
      <div class="bottom">
        <span class="totalNum">共{{totalNum}}件</span>
        <div class="bot-right">
          <span>应付:</span>
          <span>￥{{this.totalPrice - this.coupon -this.discount+ this.freight}}</span>
          <button @click="submit">提交订单</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Toast } from "mint-ui";
import { formatTime, toDub } from "../../util/util";
export default {
  name: "Settle",
  components: {},
  data() {
    return {
      fullHeight: document.documentElement.clientHeight,
      logoImg: require("../../assets/images/hq/logo.jpg"),
      data: [],
      totalPrice: 0,
      totalNum: 0,
      totalIntegral: 0, //用户积分
      addresslist: [],
      address: [],
      addressSlots: [],
      showPicker: false,
      name: "",
      tel: "",
      mdTel: "",
      province: "",
      city: "",
      county: "",
      detail: "",
      remark: "",
      title: "",
      coupon: 0, //优惠券
      couponType: true, //优惠券类型
      cuId: "", //优惠券id
      integral: 0, //积分
      freight: 5,
      discount: 0 //会员折扣
    };
  },
  methods: {
    showToast() {
      Toast({
        message: "可用积分为零，无法使用积分抵零",
        position: "middle",
        duration: 2000
      });
    },
    getHeight() {
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeight;
          this.fullHeight = window.fullHeight;
        })();
      };
    },
    getAddress() {
      this.axios
        .get("http://115.28.137.176:7070/addressOperation/selectAddress", {
          params: {
            userId: "3"
          }
        })
        .then(res => {
          this.addresslist = res.data.data;
          res.data.data.map(v => {
            if (v.addressId == "1") {
              this.address = v;
              this.name = v.receiveName;
              this.tel = v.receiveTel;
              this.mdTel =
                v.receiveTel.substr(0, 3) + "****" + v.receiveTel.substr(7, 4);
              this.province = v.province;
              this.city = v.city;
              this.county = v.country;
              this.detail = v.detailed;
            }
          });
        })
        .catch(err => {
          console.log("网络错误", err);
        });
    },
    getData() {
      var list = JSON.parse(localStorage.getItem("cartList"))[0];
      list.goodsInfo.map(v => {
        if (v.product.proAprice > 0) {
          this.$set(v.product, "price", v.product.proAprice);
        } else if (v.product.proBprice > 0) {
          this.$set(v.product, "price", v.product.proBprice);
        }
      });
      this.data = list.goodsInfo;
      this.totalPrice = list.price;
      this.integral = list.integral;
      this.totalIntegral = list.totalIntegral;
      this.totalNum = list.num;
    },
    //获取折扣
    getDiscount() {
      this.axios
        .get("http://115.28.137.176:8098/coupon/discountSelect", {
          params: {
            id: "1"
          }
        })
        .then(res => {
          console.log("折扣", res.data.data);
          this.discount = res.data.data;
        })
        .catch(err => {
          console.log("网络错误", err);
        });
    },
    //获取优惠券 最大
    getCoupon() {
      this.axios
        .get("http://115.28.137.176:8098/coupon/userCouponSelect", {
          params: {
            id: "1"
          }
        })
        .then(res => {
          var max1 = 0;
          var max2 = 0;
          res.data.data.map(v => {
            //true为钱 false为百分比
            if (v.couponType) {
              if (v.couponValue > max1) {
                max1 = v.couponValue;
              }
              this.couponType = 1;
              this.cuId = v.cuId;
            } else {
              if ((v.couponValue * this.totalPrice) / 100 < v.couponDoor) {
                if ((v.couponValue * this.totalPrice) / 100 > max2) {
                  max2 = (v.couponValue * this.totalPrice) / 100;
                }
              } else {
                if ((v.couponValue * this.totalPrice) / 100 > max2) {
                  max2 = v.couponDoor;
                }
              }
              this.couponType = 0;
              this.cuId = v.cuId;
            }
          });
          if (max1 > max2) {
            this.coupon = max1;
          } else {
            this.coupon = max2;
          }
          console.log("优惠券", this.coupon);
        })
        .catch(err => {
          console.log("网络错误", err);
        });
    },
    delCoupon() {
      this.axios
        .get("http://115.28.137.176:8098/coupon/couponUse", {
          params: {
            id: this.cuId
          }
        })
        .then(res => {})
        .catch(err => {
          console.log("网络错误", err);
        });
    },
    //删除购物车
    delCart() {
      this.data.map((v, k) => {
        this.axios
          .get("http://115.28.137.176:8080/deleteCart", {
            params: {
              cartId: v.cartId
            }
          })
          .then(res => {})
          .catch(err => {
            console.log("网络错误", err);
          });
      });
    },
    changeAddress(index) {
      this.addresslist.map((v, i) => {
        if (i == index) {
          this.address = v;
          this.name = v.receiveName;
          this.tel = v.receiveTel;
          this.mdTel =
            v.receiveTel.substr(0, 3) + "****" + v.receiveTel.substr(7, 4);
          this.province = v.province;
          this.city = v.city;
          this.county = v.country;
          this.detail = v.detailed;
        }
      });
      this.showPicker = false;
    },
    back() {
      this.$router.go(-1);
    },
    submit() {
      var ids = [];
      localStorage.setItem("ids", JSON.stringify(ids));
      //添加订单
      var ids = JSON.parse(localStorage.getItem("ids"));
      // this.delCart();
      // this.delCoupon();
      this.data.map((v, k) => {
        var data = JSON.stringify({
          userId: "1",
          createTime: new Date(),
          endTime: "",
          payStatus: 0,
          payTime: "",
          sendStatus: 1,
          sendTime: new Date(),
          deleteStatus: 0,
          deleteTime: "",
          deleteResult: "",
          originalCast: this.totalPrice, //原价
          levalSub: this.discount, //会员等级折扣
          couponSub: this.coupon, //优惠券额度/折扣
          couponType: this.couponType, //优惠券类型
          scoreSub: this.integral, //积分抵扣
          sendMoney: this.freight,
          sumMoney:
            this.totalPrice - this.coupon - this.discount + this.freight, //最终价格
          receiveName: this.name,
          receiveTel: this.tel,
          proivnce: this.province,
          city: this.city,
          couty: this.county,
          detailed: this.detail,
          note: this.remark,
          proId: v.proId,
          proPrice: v.product.price || 0,
          proNum: v.product.c_num
        });
        this.axios
          .post("http://115.28.137.176:8091/SecondKillOrder/testOrderInsert", data)
          .then(res => {
            console.log(res.data.data);
            var id = res.data.data;
            ids.push({ id: id });
            if (k == this.data.length - 1) {
              localStorage.setItem("ids", JSON.stringify(ids));
              localStorage.setItem(
                "price",
                this.totalPrice - this.coupon - this.discount + this.freight
              );
              localStorage.setItem("integral", this.integral);
              // this.$router.push({
              //   path: "/cart/submit"
              // });
              location.href = "./submit.html";
            }
          })
          .catch(err => {
            console.log("网络错误", err);
          });
        // location.href = "./submit.html";
      });
    }
  },

  watch: {
    fullHeight(val) {
      if (this.timer) {
        this.fullHeight = val;
        this.timer = true;
        setTimeout(() => {
          this.timer = false;
        }, 400);
      }
    }
  },
  mounted: function() {
    this.getHeight();
    this.getData();
    this.getAddress();
    this.getCoupon();
    this.getDiscount();
  }
};
</script>
<style src="../../assets/font/iconfont.css"></style>
<style lang="less">
@baseSize: 20;
@wh1: #fff;
@gray1: #f5f5f5;
@gray2: #f8f8f8;
@gray3: #d1d1d1;
@gray4: #e2e2e2;
html {
  font-size: @baseSize*1px;
}
.px2rem(@name,@px) {
  @{name}: @px / 2 / @baseSize * 1rem;
}
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
button {
  outline: none;
}
.ellipsis() {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.settle {
  background: @gray1;
  .top {
    .px2rem(height, 76);
    .px2rem(line-height, 76);
    display: flex;
    align-items: center;
    background: #fff;
    span:first-child {
      width: 39%;
      .px2rem(margin-left, 22);
      .px2rem(font-size, 36);
    }
    span:last-child {
      .px2rem(font-size, 31);
    }
  }
  .address {
    display: flex;
    .px2rem(height, 200);
    .px2rem(margin-top, 15);
    padding: 10px 8px 0 8px;
    background: #fff;
    flex-direction: column;
    .addr-main {
      display: flex;
      .px2rem(height, 192);
      align-items: center;
      .msg {
        .px2rem(width, 660);
        .px2rem(margin-left, 20);
        .no-msg {
          .px2rem(font-size, 30);
        }
        .has-msg {
          display: flex;
          .px2rem(margin-left, 20);
          .px2rem(line-height, 40);
          .icon {
            .px2rem(width, 50);
          }
          .info {
            display: flex;
            flex-direction: column;
            .px2rem(font-size, 25);
            .person {
              span:last-child {
                .px2rem(margin-left, 18);
              }
            }
            .addr {
              .px2rem(margin-top, 22);
              span {
                .px2rem(line-height, 30);
                .px2rem(font-size, 22);
                .ellipsis();
              }
            }
          }
        }
      }
      .right {
        float: right;
        .right-icon {
          .px2rem(font-size, 25);
          color: @gray3;
        }
      }
    }
    .line {
      display: flex;
      .px2rem(height, 18);
      align-items: flex-end;
      div {
        .px2rem(width, 60);
        .px2rem(height, 10);
        .px2rem(margin-right, 17);
      }
      div:nth-child(2n) {
        background: #fa8f95;
      }
      div:nth-child(2n-1) {
        background: #94c8ef;
      }
    }
  }
  .totalnum {
    .px2rem(margin-top, 13);
    .px2rem(height, 50);
    .px2rem(line-height, 50);
    display: flex;
    padding: 9px;
    .px2rem(font-size, 25);
    background: #fff;
    border-bottom: 1px solid @gray1;
    div {
      width: 50%;
      .px2rem(height, 50);
      .px2rem(line-height, 50);
      display: flex;
      &:first-child {
        .px2rem(margin-left, 15);
        align-items: center;
        img {
          .px2rem(width, 40);
          .px2rem(height, 40);
        }
        span {
          .px2rem(margin-left, 10);
        }
      }
      &:last-child {
        display: flex;
        justify-content: flex-end;
      }
    }
  }
  .list {
    display: flex;
    flex-direction: column;
    .item {
      display: flex;
      background: #fff;
      align-items: center;
      .px2rem(height, 184);
      padding: 9px 20px;
      .img {
        .px2rem(width, 144);
        img {
          .px2rem(width, 144);
          .px2rem(height, 144);
        }
      }
      .msg {
        display: flex;
        flex-direction: column;
        .px2rem(width, 400);
        .px2rem(height, 160);
        .px2rem(margin-left, 30);
        .px2rem(font-size, 22);
        .name {
          .px2rem(width, 423);
          .px2rem(font-size, 23);
          .px2rem(height, 68);
          .px2rem(line-height, 34);
          display: flex;
          .ellipsis();
        }
        .specs {
          display: flex;
          flex-direction: column;
          span {
            .px2rem(font-size, 20);
            .px2rem(margin-bottom, 20);
          }
        }
      }
      .price {
        .px2rem(width, 200);
        .px2rem(height, 160);
        display: flex;
        justify-content: flex-end;
        span {
          .px2rem(font-size, 20);
        }
      }
    }
  }
  .item-list {
    .item {
      display: flex;
      .px2rem(height, 95);
      .px2rem(line-height, 95);
      background: #fff;
      .px2rem(font-size, 27);
      .px2rem(padding-left, 20);
      .px2rem(padding-right, 20);
      border: 1px solid @gray2;
      .left {
        width: 76%;
      }
      .right {
        width: 24%;
        display: flex;
        justify-content: flex-end;
        .icon {
          color: @gray3;
          .px2rem(width, 40);
          .px2rem(margin-left, 10);
        }
      }
    }
    .coupon {
      .px2rem(margin-top, 20);
      .px2rem(margin-bottom, 20);
    }
    .integral {
      .left {
        .countint {
          .px2rem(margin-left, 30);
        }
        .warning {
          color: red;
        }
      }
    }
    .remarks {
      .px2rem(margin-top, 18);
      .px2rem(margin-bottom, 18);
      display: flex;
      align-items: center;
      input {
        outline: none;
        background: transparent;
        border: 1px solid @gray4;
        .px2rem(height, 60);
        .px2rem(width, 525);
        .px2rem(margin-left, 25);
        .px2rem(padding-left, 27);
        .px2rem(font-size, 21);
        .px2rem(border-radius, 10);
      }
    }
  }
  .price-list {
    .item {
      display: flex;
      .px2rem(height, 75);
      .px2rem(line-height, 75);
      background: #fff;
      .px2rem(font-size, 23);
      .px2rem(padding-left, 20);
      .px2rem(padding-right, 20);
      span:first-child {
        width: 50%;
      }
      span:last-child {
        width: 50%;
        display: flex;
        justify-content: flex-end;
      }
    }
  }
  .msg-info {
    .px2rem(font-size, 20);
    .px2rem(height, 134);
    .px2rem(padding-bottom, 80);
    .px2rem(padding-top, 26);
    display: flex;
    flex-direction: column;
    text-align: center;
    background: @gray1;
    span {
      .px2rem(line-height, 40);
    }
  }
  .bottom {
    width: 100%;
    position: fixed;
    display: flex;
    background: #fff;
    bottom: 0;
    border-top: 1px solid @gray1;
    .px2rem(padding-left, 20);
    .px2rem(height, 100);
    .px2rem(line-height, 100);
    align-items: center;
    .totalNum {
      .px2rem(width, 200);
      .px2rem(font-size, 22);
    }
    .bot-right {
      .px2rem(width, 550);
      display: flex;
      justify-content: flex-end;
      span:first-child {
        .px2rem(font-size, 22);
      }
      span:nth-child(2) {
        .px2rem(font-size, 27);
        .px2rem(margin-left, 18);
        .px2rem(margin-right, 29);
      }
      button {
        border: none;
        .px2rem(margin-left, 19);
        .px2rem(width, 242);
        .px2rem(height, 100);
        .px2rem(line-height, 100);
        .px2rem(font-size, 28);
        background: #e94716;
        text-align: center;
      }
    }
  }
}
.picker-mask {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.5;
  overflow: hidden;
  z-index: 1;
}
.picker {
  width: 100%;
  overflow: hidden;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 2;
  background: @wh1;
  .px2rem(font-size, 25);
  li {
    .px2rem(padding, 20);
    .px2rem(line-height, 60);
    border-bottom: 1px solid @gray1;
    display: flex;
    flex-direction: column;
  }
}
</style>
